<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<jsp:include page="/jsp/common/jquerylibs.jsp"></jsp:include>
<jsp:include page="/jsp/common/csslibs.jsp"></jsp:include>

<script type="text/javascript">
	$(function() {
		$('#tt').datagrid({
			title : 'Load Data',
			iconCls : 'icon-save',
			width : 600,
			height : 250,
			url : '<s:url value="/jsp/user/queryUser.action"/>',
			loadMsg : '装载中...',
			columns : [ [ {
				field : 'uid',
				title : 'uid',
				width : 80
			}, {
				field : 'name',
				title : 'name',
				width : 80
			}, {
				field : 'email',
				title : 'email',
				width : 80,
				align : 'right'
			} ] ],
			pagination : true
		});
	});
</script>

</head>
<body>
	<table>
		<tr>
			<td>用户名</td>
			<td><s:textfield name="form.user.name" id="name"/></td>
			<td>邮箱：</td>
			<td><s:textfield name="form.user.email" id="email"/></td>
			<td><input type="button" value="查询" onclick="query()"/></td>
		</tr>
	</table>
	<table id="tt"></table>
</body>
</html>
<script type="text/javascript">
	//<table id="tt"></table>
	//列表显示
	$('#tt').datagrid(
			{
				title : '表头列表1s',
				iconCls : 'icon-ok',
				width : 900,
				height : 250,
				url : '${pageContext.request.contextPath}/json/queryUser',
				pageSize : 5,
				pageList : [ 10, 20, 30, 40, 50, 60, 70, 80, 100, 120, 150,
						200, 250, 300 ],
				nowrap : false,
				striped : true,
				collapsible : true,
				loadMsg : '数据装载中...',
				sortName : 'code',
				sortOrder : 'desc',
				removeSort : false,
				fronzenColumns : [ [ {
					field : 'ck',
					checkbox : true
				} ] ],
				columns : [ [ {
					field : 'uid',
					title : 'uid',
					width : 80
				}, {
					field : 'name',
					title : 'name',
					width : 80
				}, {
					field : 'email',
					title : 'email',
					width : 80,
					align : 'right'
				} ] ],
				pagination : true,
				rownumbers : true
			});

	$('#tt').datagrid('getPager').pagination({
		displayMsg : '当前显示第 {from} 条到第 {to} 条记录，共有 {total} 条记录',
		showPageList : true,
		beforePageText : '当前第',
		afterPageText : '页，本页共 {pages}条记录',
		//total:300,
		//pageSize:10,
		//pageList:[10,20,30,40,50,60,70,80,100,120,150,200,250,300],
		onSelectPage : function(pageNumber, pageSize) {
			$(this).pagination('loading');
			alert('pageNumber:' + pageNumber + ',pageSize:' + pageSize);
			$(this).pagination('loaded');
		}
	});
	
	function query(){
		
		
		// 获取查询参数

				var queryParams = $('#tt').datagrid('options').queryParams;

		       var name = $.trim($("#name").val());
		       var email = $.trim($("#email").val());
		       // condition对应action的实例变量condition
			   alert(name+":"+email);
		       queryParams["form.user.name"] = name;
		       queryParams["form.user.email"] = email;
		       // 重置查询页数为1

		       $('#tt').datagrid('options').pageNumber = 1;

		       var p = $('#tt').datagrid('getPager');

		       if (p){

		           $(p).pagination({

		              pageNumber:1

		           });

		       }

		       // 刷新列表数据

		       $('#tt').datagrid('reload');


	}
</script>
